<template>
  <el-row class="row">
    <el-col :span="24">
      <el-page-header @back="goBack" content="详情页面"></el-page-header>
      <el-divider></el-divider>
    </el-col>
    <el-col :span="24">
      <el-steps :active="step_active" finish-status="success" simple>
        <el-step title="项目开题" @click.native="step_click(0)" class="step_style"></el-step>
        <el-step title="中期检查" @click.native="step_click(1)" class="step_style"></el-step>
        <el-step title="毕业论文" @click.native="step_click(2)" class="step_style"></el-step>
        <el-step title="成绩评定" @click.native="step_click(3)" class="step_style"></el-step>
      </el-steps>
      <div class="hr_div" :style="{marginLeft:+width_div+'%'}">
        <hr class="hr_s"/>
      </div>

    </el-col>

    <el-col v-loading="loading">
      <el-tabs v-model="activeName">
        <el-tab-pane name="0">
          <el-main style="padding: 0 20px;">
            <div v-for="(o,index) in data.filter(d => d.teacherReleaseTask.type=='项目开题')">
              <el-row class="a_margin_top">
                <el-col :span="24">
                  <div class="count">{{index+1}}</div><!--序号-->
                  <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                    <el-row class="H_V_center">
                      <!--右上角三角状态-->
                      <div class="state" style="background-color: #E6A23C;z-index: 998"
                           v-if="compareTime(o.teacherReleaseTask.stopDate)">已结束
                      </div>
                      <div class="state" v-if="o.stuTaskStatus==null">未作</div>
                      <div class="state" style="background-color: #409EFF"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='1'">提交
                      </div>
                      <div class="state" style="background-color: #F56C6C"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='2'">退回
                      </div>
                      <div class="state" style="background-color: #67C23A;z-index: 999"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='3'">通过
                      </div>
                      <el-col :span="19" style="margin: -10px 0px;">
                        <div class="margin_top">
                          <span class="title_style">提交内容：{{o.teacherReleaseTask.content}}</span>
                        </div>
                        <div class="margin_top">
                          <span class="left_stl">要求：</span>
                          <span class="comment_style">{{o.teacherReleaseTask.ask}}</span>
                        </div>
                        <div class="margin_top">
                          <span class="left_stl">发布时间：</span>
                          <span class="time_style">{{o.teacherReleaseTask.releaseDate}}</span>
                          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          <span class="left_stl">结束时间：</span>
                          <span class="time_style">{{o.teacherReleaseTask.stopDate}}</span>
                        </div>
                      </el-col>
                      <el-col :span="5">
                        <el-button type="primary" icon="el-icon-view" @click="view(o)">查看</el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-col :span="24" class="H_V_center" style="color: #8c939d;margin-top: 20px">
                没有更多数据了
              </el-col>
            </el-row>
          </el-main>
        </el-tab-pane>
        <el-tab-pane name="1">
          <el-main style="padding: 0 20px;">
            <div v-for="(o,index) in data.filter(d => d.teacherReleaseTask.type=='中期检查')">
              <el-row class="a_margin_top">
                <el-col :span="24">
                  <div class="count">{{index+1}}</div><!--序号-->
                  <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                    <el-row class="H_V_center">
                      <!--右上角三角状态-->
                      <div class="state" style="background-color: #E6A23C;z-index: 998"
                           v-if="compareTime(o.teacherReleaseTask.stopDate)">已结束
                      </div>
                      <div class="state" v-if="o.stuTaskStatus==null">未作</div>
                      <div class="state" style="background-color: #409EFF"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='1'">提交
                      </div>
                      <div class="state" style="background-color: #F56C6C"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='2'">退回
                      </div>
                      <div class="state" style="background-color: #67C23A;z-index: 999"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='3'">通过
                      </div>
                      <el-col :span="19" style="margin: -10px 0px;">
                        <div class="margin_top">
                          <span class="title_style">提交内容：{{o.teacherReleaseTask.content}}</span>
                        </div>
                        <div class="margin_top">
                          <span class="left_stl">要求：</span>
                          <span class="comment_style">{{o.teacherReleaseTask.ask}}</span>
                        </div>
                        <div class="margin_top">
                          <span class="left_stl">发布时间：</span>
                          <span class="time_style">{{o.teacherReleaseTask.releaseDate}}</span>
                          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          <span class="left_stl">结束时间：</span>
                          <span class="time_style">{{o.teacherReleaseTask.stopDate}}</span>
                        </div>
                      </el-col>
                      <el-col :span="5">
                        <el-button type="primary" icon="el-icon-view" @click="view(o)">查看</el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-col :span="24" class="H_V_center" style="color: #8c939d;margin-top: 20px">
                没有更多数据了
              </el-col>
            </el-row>
          </el-main>
        </el-tab-pane>
        <el-tab-pane name="2">
          <el-main style="padding: 0 20px;">
            <div v-for="(o,index) in data.filter(d => d.teacherReleaseTask.type=='毕业论文')">
              <el-row class="a_margin_top">
                <el-col :span="24">
                  <div class="count">{{index+1}}</div><!--序号-->
                  <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                    <el-row class="H_V_center">
                      <!--右上角三角状态-->
                      <div class="state" style="background-color: #E6A23C;z-index: 998"
                           v-if="compareTime(o.teacherReleaseTask.stopDate)">已结束
                      </div>
                      <div class="state" v-if="o.stuTaskStatus==null">未作</div>
                      <div class="state" style="background-color: #409EFF"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='1'">提交
                      </div>
                      <div class="state" style="background-color: #F56C6C"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='2'">退回
                      </div>
                      <div class="state" style="background-color: #67C23A;z-index: 999"
                           v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='3'">通过
                      </div>
                      <el-col :span="19" style="margin: -10px 0px;">
                        <div class="margin_top">
                          <span class="title_style">提交内容：{{o.teacherReleaseTask.content}}</span>
                        </div>
                        <div class="margin_top">
                          <span class="left_stl">要求：</span>
                          <span class="comment_style">{{o.teacherReleaseTask.ask}}</span>
                        </div>
                        <div class="margin_top">
                          <span class="left_stl">发布时间：</span>
                          <span class="time_style">{{o.teacherReleaseTask.releaseDate}}</span>
                          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          <span class="left_stl">结束时间：</span>
                          <span class="time_style">{{o.teacherReleaseTask.stopDate}}</span>
                        </div>
                      </el-col>
                      <el-col :span="5">
                        <el-button type="primary" icon="el-icon-view" @click="view(o)">查看</el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-col :span="24" class="H_V_center" style="color: #8c939d;margin-top: 20px">
                没有更多数据了
              </el-col>
            </el-row>
          </el-main>
        </el-tab-pane>
        <el-tab-pane name="3">
          <el-form :model="gradeForm" status-icon :rules="grades" ref="gradeForm" label-width="100px"
                   class="demo-ruleForm" v-loading="gradeLoading">
            <el-form-item label="当前成绩：">
              <span>{{stuScore}}</span>
              <span v-if="stuScore==null">--</span>
            </el-form-item>
            <el-form-item label="修改成绩：" prop="grade">
              <el-input type="text" v-model.number="gradeForm.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('gradeForm')">保存</el-button>
              <el-button @click="resetForm('gradeForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-col>


  </el-row>

</template>

<script>
    export default {
        name: "StudentProgress",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value+"" == "") {
                    return callback(new Error('不能为空'));
                }
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value > 100 || value < 0) {
                        callback(new Error('成绩范围0-100'));
                    } else {
                        callback();
                    }
                }

            };
            return {
                loading: false,
                gradeLoading: false,
                width_div: 0,
                step_active: 0,//改这个
                activeName: '0',
                flag: 25.2,
                data: [],
                stuScore: "",

                gradeForm: {
                    grade: '',
                },
                grades: {
                    grade: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            compareTime(str){
                console.log(str);
                var d1=new Date(str).valueOf();
                var d2=new Date().valueOf();
                return d2>d1;
            },
            goBack() {
                console.log('go back');
                this.$router.go(-1);//返回上一层
            },
            step_click(e) {
                console.log(e);
                if (e <= this.step_active) {
                    this.activeName = e + ""
                    this.width_div = this.flag * e;
                }

            },
            view(o) {
                console.log(o)
                // this.$router.push({name: 'Viewtasks', params: {}});
                this.$router.push({
                    path: '/student/graduationproject/TeaViewtasks',
                    query: {
                        id: encodeURIComponent(JSON.stringify(o))
                    }
                })
            },
            selData() {
                //studentSelection/stuSelTopic
                var self = this;
                self.loading = true;
                var body = {
                    topicId: self.$route.query.id,
                    stuId: self.$route.query.stuId,
                }
                self.$http.post(self.URL.api + 'studentSelection/stuSelTopicByTopicId', self.qs.stringify(body))
                    .then(function (response) {
                        console.log(response.data)
                        if (response.data.flag) {
                            self.data = response.data.data;
                            // var t1 = false;
                            // var t2 = false;
                            // var t3 = false;
                            // self.data.forEach(re => {
                            //     if (re.teacherReleaseTask.type == "项目开题") t1 = true
                            //     if (re.teacherReleaseTask.type == "中期检查") t2 = true
                            //     if (re.teacherReleaseTask.type == "毕业论文") t3 = true;
                            // });
                            // if (t1) self.step_active = 0;
                            // if (t2) self.step_active = 1;
                            // if (t3) self.step_active = 2;
                            self.loading = false;
                        } else {
                            self.loading = false;
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                        self.loading = false;
                    });
            },
            selGrade() {
                var self = this;
                var body = {
                    stuId: self.$route.query.stuId,
                }
                self.$http.post(self.URL.api + 'studentSelection/selStuGradeById', self.qs.stringify(body))
                    .then(function (response) {
                        console.log(response.data)
                        if (response.data.flag) {
                            self.stuScore = response.data.data.score;
                            self.gradeLoading=false;
                        } else {
                            self.gradeLoading=false;
                        }
                    })
                    .catch(function (error) {
                        self.gradeLoading=false;
                        console.log(error)
                    });
            },
            updGrade(str) {
                var self = this;
                var body = {
                    stuId: self.$route.query.stuId,
                    grade: str,
                }
                self.$http.post(self.URL.api + 'studentSelection/updStuGradeById', self.qs.stringify(body))
                    .then(function (response) {
                        console.log(response.data)
                        if (response.data.flag) {
                            self.selGrade();
                            self.gradeForm.grade="";
                        } else {
                            self.gradeLoading=false;
                        }
                    })
                    .catch(function (error) {
                        self.gradeLoading=false;
                        console.log(error)
                    });
            },
            submitForm(formName) {
                this.gradeLoading=true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.gradeForm.grade)
                        this.updGrade(this.gradeForm.grade);
                    } else {
                        this.gradeLoading=false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted: function () { //mounted　表示这个 Vue 对象加载成功了
            if (this.step_active >= 4) {
                this.width_div = 3 * this.flag;
                this.activeName = 3 + "";
            } else {
                this.width_div = this.step_active * this.flag;
                this.activeName = this.step_active + "";
            }
            this.step_active = 4;
            console.log(this.$route.query.id)
            console.log(this.$route.query.stuId)
            if (this.$route.query.id == undefined || this.$route.query.stuId == undefined) {
                this.goBack();
            }
            this.selData();
            this.selGrade();
        }
    }
</script>

<style scoped>
  .row >>> .el-tabs__item {
    height: 0px;
  }

  .row >>> .el-step__title:hover {
    color: #1267A7;
    border-color: red;
  }

  .row >>> .el-step__title {
    cursor: pointer;
  }

  .row >>> .el-tabs__header {
    margin: 0;
  }

  .row >>> .el-tabs__nav-wrap::after {
    height: 0;
  }

  .row >>> .el-steps--simple {
    /*border-bottom: 1px solid red;*/
  }

  .hr_div {
    width: 25%;
    transform: translateX(0%);
    display: flex;
    justify-content: center; /* 水平居中 */
  }

  .hr_s {
    height: 3px;
    background-color: #67C23A;
    border: 0px;
    width: 50%;
  }

  .a_margin_top {
    margin-top: 20px;
    /*overflow: hidden;*/
    padding-top: 30px;
  }

  .el-card__body {
    padding: 0px !important;
  }

  .H_V_center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-left: 20px;
  }

  /*右上角状态*/
  .state {
    display: block;
    position: absolute;
    right: -18px;
    top: -60px;
    background: #c7c7c7;
    width: 140px;
    padding-top: 40px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 77px 115px;
    -ms-transform-origin: 77px 115px;
    transform-origin: 77px 115px;
    z-index: 1;
  }

  /*角标标题样式*/
  .count {
    position: absolute;
    top: 16px;
    left: -13px;
    background-color: #409EFF;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    width: 26px;
    line-height: 26px;
    /*padding: 0 6px;*/
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ffffff;
    z-index: 999;
  }

  /*标题样式*/
  .title_style {
    font-size: 1.25em;
    font-weight: 600;
    color: rgb(98, 113, 123);
  }

  /*时间样式*/
  .time_style {
    font-size: 14px;
    font-weight: 600;
    color: rgb(98, 113, 123);
  }

  /*时间文字样式*/
  .left_stl {
    font-size: 14px;
    color: rgb(98, 113, 123);
  }

  /*备注样式*/
  .comment_style {
    font-size: 14px;
    font-weight: 100;
    color: rgb(98, 113, 123);
  }

  /*文字上边距*/
  .margin_top {
    margin: 10px 0;
  }

  .el-loading-spinner {
    top: 40% !important;
  }

</style>
